<template>
  <el-result title="对不起，路由没有相应的页面。">
    <template #icon>
      <el-image
        :src="notFound"
        fit="cover"
        style="width: 300px; height: 300px"
      />
    </template>
    <template #extra>
      <el-button type="primary" @click="goToIndex">首页</el-button>
    </template>
  </el-result>
</template>

<script>
import {reactive, toRefs} from 'vue';
import {useRouter} from 'vue-router';
import notFound from '../assets/imgs/404.jpg';

export default {
  name: 'Error404',
  setup(){
    const $router = useRouter();

    const state = reactive({
      notFound, //404图片
    });

    //点击首页按钮
    const goToIndex = () => {
      $router.push('/');
    }

    return {
      ...toRefs(state),
      goToIndex,
    }
  },
}
</script>

<style lang="scss" scoped>

</style>